<!DOCTYPE html>
<html lang="ug" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مال كىرگۈزۈش</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#4CAF50',
secondary: '#757575'
},
borderRadius: {
'none': '0px',
'sm': '2px',
DEFAULT: '4px',
'md': '8px',
'lg': '12px',
'xl': '16px',
'2xl': '20px',
'3xl': '24px',
'full': '9999px',
'button': '4px'
}
}
}
}
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
body {
min-height: 1024px;
font-family: UKIJ Ekran, sans-serif;
}
.container {
width: 1440px;
margin: 0 auto;
padding: 20px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 12px;
text-align: right;
border: 1px solid #e5e7eb;
}
th {
background-color: #f9fafb;
}
input {
width: 100%;
padding: 8px;
border: 1px solid #e5e7eb;
border-radius: 4px;
}
input:focus {
outline: none;
border-color: #4CAF50;
}
.action-btn {
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
}
.add-btn {
background-color: #4CAF50;
color: white;
}
.delete-btn {
background-color: #f44336;
color: white;
}
</style>
</head>
<body class="bg-gray-50">
<div class="container">
<div class="flex justify-between items-center mb-8">
<div class="flex items-center gap-6">
<button class="action-btn bg-red-500 hover:bg-red-600 transition-colors text-white px-4 py-2 !rounded-button whitespace-nowrap">
<i class="fas fa-arrow-right ml-2 text-sm"></i>
قايتىش
</button>
<button class="action-btn bg-blue-600 hover:bg-blue-700 transition-colors text-white px-4 py-2 !rounded-button whitespace-nowrap">
<i class="fas fa-check ml-2 text-sm"></i>
تەستىقلاش
</button>
<button class="action-btn bg-gray-500 hover:bg-gray-600 transition-colors text-white px-4 py-2 !rounded-button whitespace-nowrap">
<i class="fas fa-save ml-2 text-sm"></i>
ساقلاش
</button>
<button class="action-btn bg-green-500 hover:bg-green-600 transition-colors text-white px-4 py-2 !rounded-button whitespace-nowrap">
<i class="fas fa-plus ml-2 text-sm"></i>
ساقلاش ۋە يىڭىدىن قۇرۇش
</button>
</div>
<div class="flex items-center gap-6">
<div class="flex items-center gap-2">
<i class="fas fa-file-alt text-gray-500"></i>
<span class="text-gray-700">ھۆججەت نومۇرى: CG202503181947422</span>
</div>
<div class="flex items-center gap-2">
<i class="fas fa-calendar text-gray-500"></i>
<span class="text-gray-700">چېسلا:</span>
<input type="date" class="p-2 border border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary outline-none rounded !rounded-button" value="2025-03-18">
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm p-6">
<div class="mb-8">
<label class="flex items-center gap-2 mb-2 text-gray-700">
<i class="fas fa-cart-shopping text-gray-500"></i>
تەمىنلىگۈچى:
</label>
<div class="relative w-64">
<select class="w-full p-2 pr-8 border border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary outline-none rounded appearance-none !rounded-button bg-white">
<option>تەمىنلىگۈچىنى تاللاڭ</option>
</select>
<i class="fas fa-chevron-down absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
</div>
</div>
<table class="mb-6">
<thead>
<tr>
<th>№</th>
<th>مال</th>
<th>بىرلىكى</th>
<th>ئامبار سانى</th>
<th>سانى</th>
<th>سېتىۋېلىش باھاسى</th>
<th>ئىتىببار(%)</th>
<th>ئىتىببار باھاسى</th>
<th>پۈتۈن باھا</th>
<th>مال نومۇرى</th>
<th>ئىزاھات</th>
<th>مەشغۇلات</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<button class="flex items-center text-blue-600 hover:text-blue-700 transition-colors !rounded-button whitespace-nowrap">
<i class="fas fa-box-open ml-2 text-sm"></i>
مال تاللاش
</button>
</td>
<td></td>
<td></td>
<td><input type="number" class="w-20"></td>
<td><input type="number" class="w-24"></td>
<td><input type="number" class="w-20"></td>
<td>0.00</td>
<td>0.00</td>
<td></td>
<td><input type="text"></td>
<td>
<div class="flex gap-2">
<button class="text-blue-600 hover:text-blue-700 !rounded-button whitespace-nowrap">
<i class="fas fa-plus"></i>
</button>
<button class="text-red-600 hover:text-red-700 !rounded-button whitespace-nowrap">
<i class="fas fa-trash"></i>
</button>
<button class="text-green-600 hover:text-green-700 !rounded-button whitespace-nowrap">
<i class="fas fa-shopping-cart"></i>
</button>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="7" class="text-right font-bold">جەمئىي:</td>
<td>0.00</td>
<td>0.00</td>
<td colspan="3"></td>
</tr>
</tfoot>
</table>
<div class="grid grid-cols-2 gap-x-8 gap-y-4 mt-8">
<div>
<div class="grid grid-cols-2 gap-x-4 mb-4">
<div class="flex items-center gap-2">
<i class="fas fa-percent text-gray-500"></i>
<span class="text-gray-700">ئىتىببار نىسبىتى:</span>
<input type="number" class="w-24 p-2 border border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary outline-none rounded !rounded-button" value="0">
<span class="text-gray-600">%</span>
</div>
<div class="flex items-center gap-2">
<i class="fas fa-money-bill-wave text-gray-500"></i>
<span class="text-gray-700">ئىتىببار سوممىسى:</span>
<input type="number" class="w-32 p-2 border border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary outline-none rounded !rounded-button" value="0.00">
</div>
</div>
<div class="flex items-center gap-4">
<label>ئىتىبباردىن كېيىنكى سومما:</label>
<span>0.00</span>
</div>
</div>
<div>
<div class="grid grid-cols-2 gap-x-4 mb-4">
<div class="flex items-center gap-2">
<label>ھېسابات تۈرى:</label>
<div class="relative w-48">
<select class="w-full p-2 pr-8 border border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary outline-none rounded appearance-none !rounded-button bg-white">
<option>نەق پۇل</option>
<option>ئېلېكترونلۇق پۇل</option>
</select>
<i class="fas fa-chevron-down absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
</div>
</div>
<div class="flex items-center gap-2">
<label>راسچوت ھىساۋاتى:</label>
<div class="relative w-48">
<select class="w-full p-2 pr-8 border border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary outline-none rounded appearance-none !rounded-button bg-white">
<option>يېزا ئىگىلىك بانكىسى</option>
<option>سودا سانائەت بانكىسى</option>
</select>
<i class="fas fa-chevron-down absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-x-8">
<div class="flex items-center gap-4 mb-4">
<label>نىسى قالغىنى:</label>
<input type="number" class="w-32 p-2 border border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary outline-none rounded !rounded-button" value="0.00">
</div>
<div class="flex items-center gap-4 mb-4">
<label>قايتۇرغان سومما:</label>
<input type="number" class="w-32 p-2 border border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary outline-none rounded !rounded-button" value="0.00">
</div>
</div>
</div>
</div>
<div class="flex justify-center gap-6 mt-12">
<button class="action-btn bg-blue-600 hover:bg-blue-700 transition-colors text-white px-6 py-2.5 !rounded-button whitespace-nowrap">
<i class="fas fa-paper-plane ml-2 text-sm"></i>
تاپشۇرۇش
</button>
<button class="action-btn bg-gray-500 hover:bg-gray-600 transition-colors text-white px-6 py-2.5 !rounded-button whitespace-nowrap">
<i class="fas fa-eye ml-2 text-sm"></i>
تەكشۈرۈش
</button>
</div>
</div>
</div>
</body>
</html>
